import React, { Component } from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {
  getPersonalPortrait,
  getEmployeeinfo,
  getWorkingDays,
} from '../../api/Login';
import { adapt } from '../../utils/ScreenAdapter';
import { Loading } from '~/components';
import { YiButton, NavBar } from '../../components';
const defaultIcon = require('../../assets/icon/icon-share-wexin.png');
import HomeEventHandler from '../../events/HomeEventHandler';
class IntroPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userInfo: {},
    };
  }
  async componentDidMount() {
    await AsyncStorage.setItem('User', '');
    // 注册全局事件
    this.eventHandler = new HomeEventHandler(this);
    this.getUserInfo();
  }
  getUserInfo = async () => {
    try {
      Loading.show();
      let [AvatarData, WorkingData, EmployeeData] = await Promise.all([
        getPersonalPortrait(),
        getWorkingDays(),
        getEmployeeinfo(),
      ]);
      this.setState({
        userInfo: {
          avatar:
            (AvatarData.data.avatarFile.length &&
              AvatarData.data.avatarFile[0].url) ||
            '',
          days: WorkingData.data.id,
          info: EmployeeData.data,
        },
      });
      await AsyncStorage.setItem('User', JSON.stringify(EmployeeData.data));
      Loading.hide();
    } catch (e) {
      Loading.hide();
      console.log('用户信息接口出错', e);
    }
  };
  loginOut = () => {
    const { replace } = this.props.navigation;
    AsyncStorage.setItem('Authorization', '');
    replace('Login');
  };
  render() {
    const { userInfo } = this.state;
    return (
      <View style={{ flex: 1 }}>
        <NavBar title="首页" hideLeftIcon={true} />
        <View style={styles.userInfoWrap}>
          <Image
            style={styles.userAvatar}
            defaultSource={defaultIcon}
            source={userInfo.avatar ? { uri: userInfo.avatar } : defaultIcon}
          />
          <View>
            <Text style={styles.userName}>
              {userInfo.info && userInfo.info.employeeName}
            </Text>
            <Text style={styles.department}>
              {userInfo.info && userInfo.info.departmentName}-
              {userInfo.info && userInfo.info.postName}
            </Text>
            <Text style={styles.datHint}>今天是你陪伴微微成长的</Text>
            <View>
              <Text>
                第 <Text style={styles.days}>{userInfo.days}</Text> 天
              </Text>
            </View>
          </View>
        </View>
        <View
          style={{
            display: 'flex',
            textAlign: 'center',
            justifyContent: 'center',
            flexDirection: 'row',
          }}
        >
          <YiButton
            title="退出登录"
            style={{
              width: '90%',
              marginTop: adapt(16),
              marginHorizontal: 'auto',
            }}
            onPress={this.loginOut}
          />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  userInfoWrap: {
    paddingHorizontal: adapt(20),
    marginTop: adapt(20),
    display: 'flex',
    flexDirection: 'row',
  },
  userAvatar: {
    width: adapt(60),
    height: adapt(60),
    marginRight: adapt(10),
    borderRadius: adapt(30),
  },
  userName: {
    fontSize: adapt(28),
    fontWeight: '500',
    color: 'rgba(0,0,0,0.84)',
  },
  department: {
    fontSize: adapt(16),
    color: 'rgba(0,0,0,0.64)',
    marginTop: adapt(4),
    marginBottom: adapt(10),
  },
  days: {
    fontSize: adapt(20),
    fontWeight: '700',
    color: '#ff9e00',
    marginHorizontal: adapt(6),
  },
});
export default IntroPage;
